<template>
  <el-dialog
    append-to-body
    v-if="show"
    :title="title"
    :width="width + '%'"
    :top="top + 'vh'"
    :modal="showModal"
    :visible.sync="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="close"
  >
    <div class="wp-body__box" :style="{ height: height + 'px' }">
      <el-form
        ref="customerForm"
        :model="customerInfo"
        label-position="right"
        label-width="120px"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerName">
              <el-input
                v-model.trim="customerInfo.customerName"
                class="wp-form-280"
                placeholder="客户名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源渠道" prop="channel">
              <el-select
                v-model.trim="customerInfo.channel"
                class="wp-form-280"
                placeholder="来源渠道"
                clearable
              >
                <el-option
                  v-for="item in customerChannels"
                  :label="item.bizName"
                  :value="item.bizValue"
                  :key="item.bizValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户级别" prop="level">
              <el-select
                v-model="customerInfo.level"
                class="wp-form-280"
                placeholder="客户级别"
                clearable>
                <el-option
                  v-for="item in customerLevels"
                  :label="item.value + '(' + item.label + ')'"
                  :value="item.value"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="12">
            <el-form-item label="负责人" prop="chargePerson">
               <Employee-seach :employeeCode.sync="customerInfo.chargePerson" :employeeName.sync="customerInfo.chargePersonName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobile">
              <el-input
                v-model.trim="customerInfo.mobile"
                class="wp-form-280"
                placeholder="手机号码"
                 maxlength="11"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话号码" prop="telephone">
              <el-input
                v-model.trim="customerInfo.telephone"
                class="wp-form-280"
                placeholder="电话号码"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="传真号码" prop="fax">
              <el-input class="wp-form-280" v-model="customerInfo.fax" placeholder="传真号码" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户邮箱" prop="email">
              <el-input
                v-model.trim="customerInfo.email"
                class="wp-form-280"
                placeholder="客户邮箱"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="省/市/区">
            <Region-cascader
             customClass="wp-form-280"
            :province.sync="customerInfo.province"
            :provinceCode.sync="customerInfo.provinceCode"
            :city.sync="customerInfo.city"
            :cityCode.sync="customerInfo.cityCode"
            :area.sync="customerInfo.area"
            :areaCode.sync="customerInfo.areaCode"/>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="详细地址" prop="address">
              <el-input
                class="wp-form-280"
                v-model.trim="customerInfo.address"
                placeholder="详细地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                class="wp-form-280"
                v-model.trim="customerInfo.remark"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <Contacts-box
            ref="contacts"
            @scroll-to="scrollToBottom"
          ></Contacts-box>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="wp-footer__box">
      <el-button @click.native="close">取消</el-button>
      <el-button type="success" @click.native="save('customerForm',true)">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import RegionCascader from '@/components/RegionCascader'
import { mapGetters } from 'vuex'
import EmployeeSeach from '@/views/components/EmployeeSeach'
import ContactsBox from './detail/ContactsBox'
import Mixins from './mixins'

export default {
  props: {
    title: String,
    width: {
      type: Number,
      default: 80
    },
    top: {
      type: Number,
      default: 2
    },
    show: {
      type: Boolean,
      default: false
    },
    showModal: {
      type: Boolean,
      default: true
    },
    height: {
      type: Number,
      default: 300
    }
  },
  mixins: [Mixins],
  components: { ContactsBox, EmployeeSeach, RegionCascader },
  watch: {
    show (nVal, oVal) {
      if (nVal) {
        this.customerInfo = {}
      }
    }
  },
  data () {
    return {
      rules: {
        customerName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        mobilephone: [{ required: true, message: '不能为空', trigger: 'blur' }],
        level: [{ required: true, message: '不能为空', trigger: 'blur' }],
        channel: [{ required: true, message: '不能为空', trigger: 'blur' }],
        chargePerson: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getCustomerChannels()
  },
  computed: {
    ...mapGetters(['customerLevels'])
  },
  methods: {
    close () {
      const vm = this
      if (this.customerInfo && Object.keys(this.customerInfo).length !== 0) {
        this.$msgBox.confirm('确认放弃保存数据？', () => {
          vm.$emit('update:show', false)
        })
      } else {
        this.$emit('update:show', false)
      }
    },
    save (formName, saveContacts) {
      // 保存客户信息
      const f = this.checkFormData(formName)
      if (!f) {
        return
      }
      if (saveContacts) {
        // 客户联系人信息
        this.customerInfo.contactsInfos = this.$refs.contacts.$data.list
      }
      this.requestOption('customerCreate', {...this.customerInfo}, (res) => {
        this.$emit('update:show', false)
        this.$parent.initPageList()
      })
    },
    scrollToBottom (num) {
      document.querySelector('.wp-body__box').scrollTop = this.height
    }

  }
}
</script>
<style lang="scss" scoped>
.wp-body__box {
  position: relative;
  overflow: auto;
  padding: 10px;
  .wp-form-280 {
    width: 280px;
  }
}

.wp-footer__box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
